<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>注册</title>
<meta name="viewport" content="height = device-height, width=device-width, initial-scale=1, user-scalable=no">
<link href="${ctxStatic}/jqmobile/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctxStatic}/kaka/css/layout.css">
<script src="${ctxStatic}/jquery/1.11.1/jquery-1.11.1.min.js"></script>
<script src="${ctxStatic}/jqmobile/jquery.mobile-1.4.3/jquery.mobile-1.4.3.min.js"></script>
<style>
.btnArea{ margin-top:20px; }
.btnShare{ color:#fff !important; text-shadow:none !important;}
</style>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
  <div data-role="content" class="joinArea">
    <div style="padding:5px; background: #02869D; color:#FFFFFF">
	<p><span style="font-weight:bold; color:#FFFF66">卡卡足迹</span>是集成微信公众号和App的开放会员平台，充分利用微信亿万用户的庞大群体及其强关系型、快速传播等特点，通过手机二维码扫描，实现极其便捷的线上线下业务快速连接。</p>
	</div>
    <p style="color:#02869D"><strong>店铺专用App</strong></p>
    <p style="color:#333333;">面向加盟店铺，提供店铺管理、商品发布、规则设置、二维码扫描记录和线上线下兑换礼品等功能。</p>
    <p style="color:#02869D"><strong>微信公众号</strong></p>
    <p style="color:#333333;">面向消费者用户，自动生成用户二维码身份证明，可快速获取店铺提供的消费点数、商品信息、优惠信息、快速兑换消费点数，同时可以对店铺进行有奖微信分享。</p>
    <div class="btnArea borderTb"><a id="xiazai" class="btnShare fontBtn" href="Kaka_android.apk" data-ajax="false">下载店铺专用App(Android版)</a></div>
    <div style="border: dotted 1px #0099CC; padding:5px">
	<p style="color:#FF6600;">如需加盟，请在此提交您的店铺资料，工作人员核实后，为您分配登录店铺专用app的账号。 </p>
    <form action="${ctx}/addCheck" method="post" target="_blank" id="pagerForm">
      <div class="ui-field-contain">
        <label for="shopName">
        店铺名称:
        <div id="shopnamemsg">
          <c:if test="${dmessage ne null}"><font color="red">
            <div id="dmessage">${dmessage}！</div>
            </font></c:if>
        </div>
        </label>
        <input type="text" name="shopName" id="shopName" placeholder="输入文本" value="${shopName}">
      </div>
		<div class="ui-field-contain">
		    <label for="address">
		    详细地址:
		    <div id="addressmsg">
		    <c:if test="${amessage ne null}"><font color="red">
		    <div id="amessage">${amessage}！</div>
		    </font></c:if>
		    </div>
		    </label>
		    <input type="text" name="address" id="address" placeholder="输入文本" value="${address}">
		</div>      
      <div class="ui-field-contain">
        <label for="password">
        主营业务:
        <div id="passwordmsg">
          <c:if test="${passmessage ne null}"><font color="red">
            <div id="passmessage">${passmessage}！</div>
            </font></c:if>
        </div>
        </label>
        <input type="text" name="password" id="password" placeholder="输入文本" value="${password}">
      </div>
      <div class="ui-field-contain">
        <label for="phone">
        手机号码:
        <div id="phonemsg">
          <c:if test="${pmessage ne null}"><font color="red">
            <div id="pmessage">${pmessage}！</div>
            </font></c:if>
        </div>
        </label>
        <input type="number" name="phone" id="phone" placeholder="输入文本" value="${phone}">
      </div>      
	  
      <div class="ui-field-contain">
	  <div class="btnArea"><a class="btnShare" id="submit" data-ajax="false">提交</a></div>
	  
        <input type="hidden" name="openid" value="${openid}">
      </div>
    </form>
  </div>
  </div>
<div data-role="popup" id="popupMenu" class="ui-content" data-theme="b" style="max-width:280px">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<p>点击右上角“在浏览器中打开”下载店铺专用app！</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').bind('click', function(){
$("#pagerForm").submit();
});
$("#phone").change(function(){
	$("#phonemsg").empty();
	$("#pmessage").empty();
	$.ajax( {
		url : '${ctx}/phoneCheck',
		type : 'post',
		dataType : 'json',
		data : {phone:$("#phone").val()},
		success : function(json) {
			if (json.message == '手机号可用') {
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#phonemsg').append($optbatch);
 			}else if(json.message == '手机号已存在'){
				var $optbatch = $("<font color='red'>该手机号已注册过，请更换手机号！</font>");	
				$('#phonemsg').append($optbatch);
			}else if(json.message == '请输入正确手机号'){
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#phonemsg').append($optbatch);				
			}else{
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#phonemsg').append($optbatch);				
			}
		}
	});
});
$("#password").change(function(){
	$.ajax( {
		url : '${ctx}/passwordCheck',
		type : 'post',
		dataType : 'json',
		data : {password:$("#password").val()},
		success : function(json) {
			if (json.message == '请输入主营业务') {
				$("#passwordmsg").empty();
				var $optbatch = $("<font color='red'>请输入主营业务！</font>");	
				$('#passwordmsg').append($optbatch);								
			}else{
				$("#passwordmsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");	
				$('#passwordmsg').append($optbatch);												
			}
		}
	});
});
$("#shopName").change(function(){
	$.ajax( {
		url : '${ctx}/shopNameCheck',
		type : 'post',
		dataType : 'json',
		data : {shopName:$("#shopName").val()},
		success : function(json) {
			if (json.message == '店名可用') {
 				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#shopnamemsg').append($optbatch);
 			}else if(json.message == '店铺名已存在'){
				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#shopnamemsg').append($optbatch);
			}else{
				$("#shopnamemsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#shopnamemsg').append($optbatch);				
			}
		}
	});
});
$("#address").change(function(){
	$.ajax( {
		url : '${ctx}/addressCheck',
		type : 'post',
		dataType : 'json',
		data : {address:$("#address").val()},
		success : function(json) {
			if (json.message == '地址可用') {
 				$("#addressmsg").empty();
				var $optbatch = $("<font color='green'>OK！</font>");
				$('#addressmsg').append($optbatch);
 			}else if(json.message == '地址已存在'){
				$("#addressmsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#addressmsg').append($optbatch);
			}else{
				$("#addressmsg").empty();
				var $optbatch = $("<font color='red'>"+json.message+"！</font>");	
				$('#addressmsg').append($optbatch);				
			}
		}
	});
});
if(isWeiXin()){ 
	$("#xiazai").empty();
	var $optbatch = $("<a id=\"xiazai\" class=\"btnShare fontBtn\"  href=\"#popupMenu\" data-rel=\"popup\" data-transition=\"pop\">下载店铺专用App(Android版)</a>");
	$('#xiazai').append($optbatch);
}

});
function isWeiXin(){ 
	var ua = window.navigator.userAgent.toLowerCase(); 
	if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
	return true; 
	}else{ 
	return false; 
	} 
	} 
</script>
</body>
</html>